import { View, Text, Image, TouchableOpacity, StyleSheet, ScrollView,Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useAuthStore } from '../../stores/authStore';
import { theme } from '../../theme';

interface MenuItemProps {
  icon: string;
  title: string;
  onPress?: () => void;
}

function MenuItem({ icon, title, onPress }: MenuItemProps) {
  return (
    <TouchableOpacity style={styles.menuItem} onPress={onPress}>
      <Ionicons name={icon as any} size={24} color="#1a1a1a" />
      <Text style={styles.menuText}>{title}</Text>
      <Ionicons name="chevron-forward" size={24} color="#8E8E93" />
    </TouchableOpacity>
  );
}

export default function ProfileScreen() {
  const logout = useAuthStore((state) => state.logout);

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <Image
          source={{ uri: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1000&auto=format&fit=crop' }}
          style={styles.avatar}
        />
        <Text style={styles.name}>张明</Text>
        <Text style={styles.email}>网格员 | 东湖社区</Text>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>工作管理</Text>
        <MenuItem icon="stats-chart" title="工作统计" />
        <MenuItem icon="time" title="工作记录" />
        <MenuItem icon="star" title="我的收藏" />
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>系统设置</Text>
        <MenuItem icon="notifications" title="消息通知" />
        <MenuItem icon="shield" title="账号安全" />
        <MenuItem icon="help-circle" title="帮助中心" />
        <MenuItem icon="information-circle" title="关于我们" />
      </View>

      <TouchableOpacity style={styles.logoutButton} onPress={logout}>
        <Text style={styles.logoutText}>退出登录</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background.default,
  },
  header: {
    alignItems: 'center',
    padding: 20,
    backgroundColor: theme.colors.white,
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border.default,
    ...theme.shadows,
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 10,
  },
  name: {
    fontSize: 24,
    fontWeight: 'bold',
    color: theme.colors.text.primary,
  },
  email: {
    fontSize: 16,
    color: theme.colors.text.secondary,
    marginTop: 4,
  },
  section: {
    marginTop: 20,
    backgroundColor: theme.colors.white,
    paddingVertical: 10,
    ...theme.shadows,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: theme.colors.text.primary,
    marginLeft: 15,
    marginBottom: 10,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    backgroundColor: theme.colors.white,
  },
  menuText: {
    flex: 1,
    marginLeft: 15,
    fontSize: 16,
    color: theme.colors.text.primary,
  },
  logoutButton: {
    margin: 20,
    padding: 15,
    backgroundColor: theme.colors.status.pending,
    borderRadius: 10,
    alignItems: 'center',
  },
  logoutText: {
    color: theme.colors.white,
    fontSize: 16,
    fontWeight: '600',
  },
});